/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-09 17:06:56
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-09 17:53:05
 */
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import { useEffect } from 'react'
import DOMPurify from 'dompurify'
type Props = {
  content: any
}
export default function Question({ content }: Props) {
  useEffect(() => {
    // 配置 highlight.js
    hljs.configure({
      // 忽略未经转义的 HTML 字符
      ignoreUnescapedHTML: true
    })
    // 获取到内容中所有的code标签
    const codes = document.querySelectorAll('.dg-html pre')
    codes.forEach((el) => {
      // 让code进行高亮
      hljs.highlightElement(el as HTMLElement)
    })
  }, [])
  // const content = `<pre>
  //     <code>console.log(abc)</code>
  //     <code>console.log(abc)</code>
  //   </pre>
  //   <h3>nihoa</h3>
  //   <pre>
  //     <code>console.log(abc);xxx.forEach(item=>{console.log(1)})</code>
  //   </pre>`

  return (
    <div
      className="content-html dg-html"
      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content || '') }}
    >
    </div>
  )
}